store_id<template>
	<view class="shareList">
		<nav-bars title="分销邀请记录"></nav-bars>
		<view class="top">
			<view class="topNum">
				成交数量：<text>{{orderTotal}}</text>
			</view>
			<view class="staffBox">
				<view class="item active" v-if="Object.keys(staffItem).length">
					{{staffItem.realname?staffItem.realname:staffItem.nickname}}
					<text class="iconfont" @click="clearStaff">&#xe6af;</text>
				</view>
				<view class="item" @click="selectStaff" v-else>
					员工
					<text class="iconfont">&#xe693;</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in shareList" :key="index">
				<view class="topOrderNo">
					订单编号：<text>{{item.order_id}}</text>
				</view>
				<view class="infoBox">
					<view class="imgBox">
						<image :src="item.pu_headimg" mode=""></image>
					</view>
					<view class="info">
						<view class="left">
							<view class="topTit omit-1">
								{{item.pu_nickname}}
							</view>
							<text>{{item.payed_at}}</text>
						</view>
						<view class="right">+{{item.amount}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择核销员弹出层 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="popupBox">
				<view class="text">选择核销员</view>
				<scroll-view scroll-y="true" @scrolltolower="openMore" class="list">
					<view class="itemRadio" v-if="staffList.length>1">
						<u-radio-group v-model="staffId">
							<u-radio 
								v-if="item.pid!=0"
								v-for="(item, index) in staffList" :key="index" 
								:name="item.user_id"
							>
								<image :src="item.headimg" mode=""></image>
								{{item.realname?item.realname:item.nickname}}
							</u-radio>
						</u-radio-group>
					</view>
					<view class="" v-else>
						暂无数据~
					</view>
				</scroll-view>
				<view class="btn" @click="selectSubmit">
					确定
				</view>
			</view>
		</u-popup>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
	</view>
</template>

<script>
	import service_writeOff from '@/service/writeOff.js';
	import service_distri from '@/service/distri.js';
	export default{
		data(){
			return{
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				page:1,
				pagesize:10,
				staffList:[],//员工列表
				staffId:'',//员工id
				shareList:[],
				orderTotal:0,
				show:false,
				staffItem:{},//已选择核销员
				
				staffPage:1,
				staffPagesize:10
			}
		},
		onLoad() {
			this.getShareList()
			this.getShareAll()
			
		},
		onReachBottom() {
			this.getShareList('onReach')
		},
		methods:{
			// 获取礼包分享记录
			getShareList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page = 1
				}
				let sid = this.$store.state.index.sid
				let params = {
					page:this.page,
					pagesize:this.pagesize,
					store_id:sid,
					share_user_id:this.staffId
				}
				service_writeOff.getShareList(params).then(res=>{
					console.log(res,'分享记录')
					if(res.code==1){
						if(type=='onReach'){
							if(!res.data.records.length){
								this.status = 'nomre'
							}else{
								this.status = 'loading'
							}
							this.shareList = this.shareList.concat(res.data.records)
						}else{
							if(res.data.records.length<10){
								this.status = 'nomore'
							}
							this.shareList = res.data.records?res.data.records:[]
						}
					}
				})
			},
			
			// 获取礼包分享统计
			getShareAll(){
				let sid = this.$store.state.index.sid
				let params = {
					store_id:sid,
					share_user_id:this.staffId
				}
				service_writeOff.getShareAll(params).then(res=>{
					console.log(res,'分享统计')
					if(res.code==1){
						this.orderTotal = res.data.totalOrder
					}
				})
			},
			
			// 获取员工列表
			getStaffList(type){
				if(type=='more'){
					this.staffPage++
				}else{
					this.staffPage = 1
				}
				service_distri.get_promoterList({is_staff:1,page:this.staffPage,pagesize:this.staffPagesize}).then(res=>{
					console.log(res,'创客精英列表')
					if(res.code==1){
						if(type=='more'){
							this.staffList = this.staffList.concat(res.data.list)
						}else{
							this.staffList = res.data.list?res.data.list:[]
						}
					}
				})
			},
			
			// 选择核销员按钮
			selectStaff(){
				this.show = true
				this.getStaffList()
			},
			
			// 弹出框确定
			selectSubmit(){
				if(!this.staffId){
					uni.showToast({
						title:'请选择核销员',
						icon:'none'
					})
					return
				}
				this.staffItem = this.staffList.find(item=>{
					if(item.user_id == this.staffId){
						return item
					}
				})
				console.log(this.staffItem)
				this.show = false
				this.getShareList()
				this.getShareAll()
			},
			
			// 删除已选择员工
			clearStaff(){
				this.staffId = ''
				this.staffItem = {}
				this.getShareList()
				this.getShareAll()
			},
			
			// 加载更多
			openMore(){
				this.getStaffList('more')
			}
		}
	}
</script>

<style lang="scss">
	.shareList{
		.top{
			background-color: #fff;
			box-shadow: 0px 2rpx 14rpx 0px #F5F5F5;
			padding: 32rpx;
			.topNum{
				width: 100%;
				height: 130rpx;
				padding: 0 32rpx;
				border-radius: 10rpx;
				background-color: #CB9436;
				color: #fff;
				font: 500 28rpx/130rpx PingFang SC;
				text{
					font: 600 40rpx/130rpx PingFang SC;
				}
			}
			.staffBox{
				margin-top: 32rpx;
				.item{
					display: flex;
					display: inline-flex; 
					background-color: #EFEFEF;
					font: 500 25rpx/50rpx PingFang SC;
					border-radius: 50rpx;
					padding: 0 24rpx;
					.iconfont{
						font-size: 18rpx;
						line-height: 50rpx;
						color: #333;
						margin-left: 12rpx;
					}
				}
				.active{
					.iconfont{
						font-size: 32rpx;
					}
				}
			}
		}
		.list{
			padding: 32rpx;
			.item{
				padding: 0 24rpx;
				width: 100%;
				margin-bottom: 20rpx;
				background-color: #fff;
				box-shadow: 0px 2rpx 14rpx 0px #F5F5F5;
				border-radius: 16rpx;
				.topOrderNo{
					padding: 24rpx 0;
					border-bottom: 2rpx solid #f5f5f5;
					text{
						color: #CB9436;
					}
				}
				.infoBox{
					display: flex;
					align-items: center;
					padding: 24rpx 0;
					.imgBox{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: #f5f5f5;
						margin-right: 22rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}
					.info{
						width: 100%;
						align-content: center;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.left{
							.topTit{
								width: 350rpx;
								font: 600 26rpx/50rpx PingFang SC;
							}
							text{
								font: 500 24rpx/40rpx PingFang SC;
							}
						}
						.right{
							color: #CB9436;
						}
					}
				}
			}
		}
		
		.popupBox{
			padding: 32rpx;
			.text{
				font: 600 30rpx/50rpx PingFang SC;
			}
			.list{
				width: 550rpx;
				height: 550rpx;
				.itemRadio{
					.u-radio{
						margin-bottom: 26rpx;
					}
					.u-radio-group{
						display: flex;
						flex-direction: column;
					}
					.u-radio__label{
						display: flex;
						align-items: center;
					}
					image{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						flex-shrink: 0;
						margin-right: 15rpx;
					}
				}
			}
			.btn{
				width: 50%;
				background-color: #F5F5F5;
				border-radius: 50rpx;
				font: 600 26rpx/80rpx PingFang SC;
				margin: 10rpx auto;
				text-align: center;
			}
		}
		.u-load-more-wrap{
			padding-bottom: 30rpx;
		}
	}
</style>
